<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue相关练习+购物车</title>
    <link rel="stylesheet" href="../css/text.css" type="text/css">

</head>

<body>
    <div id="app">
        <!-- class与style绑定 -->
        <!-- 方法1 -->
        <!-- <div  :class="{'bgcolor':hasColor, 'forecolor':hasNum}">
            <h4>class简单的测试</h4>
        </div> -->
        <!-- 方法2数组的方法 -->
        <!-- <div  :class="[hasColor?'bgcolor':'',colorCls]">
            <h4>数组的测试</h4>
        </div> -->

        <!-- 方法3clsProp的方法 -->
        <!-- <div  :class="clsProp">
            <h4>数组的测试</h4>
        </div> -->
        <!-- <p v-if="status === 1">当status为1时显示该行</p>
        <p v-else-if="status === 2">当status为2时显示该行</p>
        <p v-else></p>
        <template v-if="type === 'name'">
            <label>用户名：</label>
            <input placeholder="请输入用户名">
        </template>
        <template v-else>
            <label>密码：</label>
            <input placeholder="请输入密码：">
        </template>
        <button @click = "handleToggleClick">点击输入下一项</button> -->

        <!-- 列表渲染指令 v-for -->
        <ul>
            <!-- in 普遍用法 of 标准用法 -->
            <!-- 1-in<li v-for="f in friuts">{{f.name}}-{{f.price}}</li> -->
            <!--2-of <li v-for="f of friuts">{{f.name}}-{{f.price}}</li> -->
            <!--3-index <li v-for="(f,index) of friuts">{{index+1}}-{{f.name}}-{{f.price}}</li> -->

            <!--排序-->
            <li v-for="(f,index) of friutSort">{{index+1}}-{{f.name}}-{{f.price}}</li>
        </ul>
        <!--对象属性的遍历 key属性名称  index序号 -->
        <!-- <ul>
            <li v-for='(u,key,index) in user'>{{index+1}}-{{key}}-{{u}}</li>
        </ul> -->
        
        <!-- 过滤 -->
        <ul>
            <template v-for='product in filterProdect'>
                <li>商品名称：{{product.ProName}}</li>
                <li>商品价格：{{product.ProPrice}}</li>
            </template>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                hasColor: true,
                hasNum: false,
                colorCls: 'forecolor',
                status: 1,
                type: 'name',
                friuts: [
                    { name: '草莓', price: 5 },
                    { name: '香蕉', price: 2 },
                    { name: '荔枝', price: 9 },
                    { name: '奶油草莓', price: 12 }
                ],
                user: {
                    userName: 'admin',
                    password: '11111',

                },
                product:[
                    {
                        ProName:'伊利酸奶',
                        ProPrice:18.8
                    },
                    {
                        ProName:'A夹心巧克力',
                        ProPrice:99.9
                    },
                    {
                        ProName:'A夹心面包',
                        ProPrice:9.9
                    },
                    {
                        ProName:'标致矿泉水',
                        ProPrice:1
                    },
                ]
            },
            methods: {
                handleToggleClick: function () {
                    this.type = this.type === 'name' ? 'password' : 'name';
                }
            },
            // 计算属性具有缓存性
            computed: {
                bgcolorCls: function () {
                    return this.hasColor ? 'bgcolor' : ','
                },
                clsProp: function () {
                    return {
                        bgcolor: this.hasColor,
                        forecolor: this.hasNum
                    }
                },
                // 排序sort小到大
                friutSort: function () {
                    return this.friuts.sort(function (a, b) {
                        return a.price - b.price;
                    })
                },
                // 过滤 A-商品名称中含A的
                filterProdect: function () {
                    return this.product.filter(function (product) {
                        return product.ProName.match(/A/);
                    })
                }

            }

        })

    </script>
</body>

</html>